<template>
  <div>
    <div class="row">
      <div @click="goToMailbox('political')" class="mailbox"><i class="el-icon-message"></i>政委信箱</div>
      <div @click="goToMailbox('commander')" class="mailbox"><i class="el-icon-message"></i>总队长信箱</div>
    </div>
    <div class="row">
      <div @click="goToMailbox('disciplinary')" class="mailbox"><i class="el-icon-message"></i>纪委信箱</div>
      <div @click="goToMailbox('politicalDepartment')" class="mailbox"><i class="el-icon-message"></i>政治部信箱</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MailBox",
  methods: {
    goToMailbox(box) {
      // 根据点击的信箱类型跳转到不同的页面
      switch (box) {
        case 'political':
          this.$router.push({ path: 'politicalmail' });
          break;
        case 'commander':
          this.$router.push({ path: 'commandermail' });
          break;
        case 'disciplinary':
          this.$router.push({ path: 'disciplinarymail' });
          break;
        case 'politicalDepartment':
          this.$router.push({ path: 'departmentmail' });
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style scoped lang="less">
.row {
  display: flex;
  width: 300px;
  justify-content: space-between;
  font-size: 16px;
  margin-top: 10px;
  padding: 0 5px;
  div {
    cursor: pointer;
    width: 135px;
    border: 1px solid #e0d2d2;
    display: flex;
    align-items: center;
    padding: 5px 5px;
    white-space: nowrap;
    .el-icon-message {
      color: rgb(26, 161, 225);
      font-size: 20px;
      margin-right: 10px;
    }

    .el-icon-s-opportunity {
      font-size: 20px;
      margin-right: 5px;
      color: gold;
    }
  }
}
</style>